<template>
  <view class="user-balance-page">
    <view class="header">
      <text class="title">我的余额</text>
    </view>
    <view class="content">
      <view class="balance-info">
        <text class="balance-amount">{{ formattedBalance }}</text>
      </view>
      <view class="withdraw-button" @click="openWithdrawDialog">
        <text>提现</text>
      </view>
      <view class="recharge-button" @click="openRechargeDialog">
        <text>充值</text>
      </view>
    </view>
  </view>

  <!--提现金额 弹窗 -->
  <uni-popup ref="withdrawDialog" type="dialog">
    <uni-popup-dialog mode="input" title="提现" placeholder="请输入提现金额" @confirm="withdraw"></uni-popup-dialog>
  </uni-popup>

  <!--提现金额 弹窗 -->
  <uni-popup ref="rechargeDialog" type="dialog">
    <uni-popup-dialog mode="input" title="充值" placeholder="请输入充值金额" @confirm="recharge"></uni-popup-dialog>
  </uni-popup>

</template>

<script setup>
  import {
    ref,
    getCurrentInstance
  } from 'vue';
  // 用户余额数据
  const userBalance = ref(0);
  // 格式化显示余额
  const formattedBalance = computed(() => {
    return userBalance.value.toFixed(2);
  });

  onShow(() => {
    getUserBalance()
  })

  //获取用户余额
  const getUserBalance = () => {
    http.request({
      url: '/user/getBalance',
      method: 'GET',
    }).then((res) => {
      console.log("获取余额");
      console.log(res);
      if (res.code == 1) {
        userBalance.value = res.data;
        console.log(userBalance.value);
      } else {
        console.log(res.msg);
        uni.showToast({
          icon: 'error',
          title: res.msg
        })
      }
    })
  }

  const withdrawDialog = ref(null);
  const {
    proxy
  } = getCurrentInstance()
  const withdrawalAmount = ref(0)

  const openWithdrawDialog = () => {
    proxy.$refs.withdrawDialog.open();
  }

  // 提现按钮点击事件
  function withdraw(value) {
    //校验金额
    const regex = /^\d+(\.\d{1,2})?$/;
    if (!regex.test(value)) {
      uni.showToast({
        icon: 'error',
        title: '请输入有效的提现金额'
      })
      // 校验不过,直接返回
      return;
    }

    // 实际提现操作
    console.log('提现金额:', value);
    // 发起提现请求
    http.request({
        url: '/user/withdraw?amount=' + value,
        method: 'POST',
      }).then((res) => {
        console.log("提现");
        console.log(res);
        if (res.code == 1) {
          uni.showToast({
            icon: 'success',
            title: '提现成功'
          })
          getUserBalance()
        } else {
          uni.showToast({
            icon: 'error',
            title: res.msg
          })
        }
      })
      .catch(err => {
        console.log(err);
        console.log("提现失败");
        uni.showToast({
          icon: 'error',
          title: '提现失败',
        })
      })
  }

  const openRechargeDialog = () => {
    proxy.$refs.rechargeDialog.open();
  }

  // 提现按钮点击事件
  function recharge(value) {
    //校验金额
    const regex = /^\d+(\.\d{1,2})?$/;
    if (!regex.test(value)) {
      uni.showToast({
        icon: 'error',
        title: '请输入有效的充值金额'
      })
      // 校验不过,直接返回
      return;
    }
    // 实际提现操作
    console.log('充值金额:', value);
    // 发起提现请求
    http.request({
        url: '/user/recharge?amount=' + value,
        method: 'POST',
      }).then((res) => {
        console.log("充值");
        console.log(res);
        if (res.code == 1) {
          uni.showToast({
            icon: 'success',
            title: '充值成功'
          })
          getUserBalance()
        } else {
          uni.showToast({
            icon: 'error',
            title: res.msg
          })
        }
      })
      .catch(err => {
        console.log(err);
        console.log("充值失败");
        uni.showToast({
          icon: 'error',
          title: '充值失败',
        })
      })
  }
</script>

<style scoped>
  .user-balance-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
  }

  .header {
    margin-bottom: 20px;
  }

  .title {
    font-size: 24px;
    font-weight: bold;
  }

  .content {
    width: 100%;
    max-width: 320px;
  }

  .balance-info {
    margin-bottom: 20px;
  }

  .balance-title {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 9px;
  }

  .balance-amount {
    display: block;
    text-align: center;
    font-weight: bold;
    font-size: 24px;
    color: #eb2444;
  }

  .withdraw-button {
    display: block;
    width: 100%;
    padding: 15px 0px 15px 0px;
    margin-top: 100px;
    background-color: #eb2444;
    color: white;
    border-radius: 10px;
    padding: 1.jpg .png;
    font-size: 16px;
    text-align: center;
    cursor: pointer;
  }

  .recharge-button {
    display: block;
    width: 100%;
    padding: 15px 0px 15px 0px;
    margin-top: 15px;
    background-color: #c3c3c3;
    color: #000;
    border-radius: 10px;
    padding: 1.jpg .png;
    font-size: 16px;
    text-align: center;
    cursor: pointer;
  }
</style>
